<template>
    <div id="scenic-list" v-loading="loadingScenicList">
      <el-form :model="scenicForm" ref="scenicForm" class="scenicForm" :inline="true" size="small">
        <el-form-item label="景区名称">
          <el-input v-model="scenicForm.scenicName"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-select clearable v-model="scenicForm.status" filterable placeholder="选择状态">
            <el-option label="正常" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" size="small" @click="search(1)">搜索</el-button>
        <el-button type="primary" size="small" @click="addProduct()">景区添加</el-button>
      </el-form>

        <el-table
                class="style-a"
                :data="tableData"
                size="small"
                border
                style="width:100%">
            <el-table-column
                    label="景区ID"
                    align="center"
                    prop="id"
                    min-width="120">
            </el-table-column>
            <el-table-column
                    label="景区名称"
                    align="center"
                    prop="scenicName"
                    min-width="200">
            </el-table-column>
            <el-table-column
                    label="门市价（元）"
                    prop="price"
                    align="center"
                    width="140">
            </el-table-column>
            <el-table-column
              label="状态"
              align="center"
              min-width="100">
              <template slot-scope="scope" class="handle">
                <p v-if="scope.row.status">正常</p>
                <p v-else>下架</p>
              </template>
            </el-table-column>
            <el-table-column
                    label="添加时间"
                    align="center"
                    prop="createTime"
                    min-width="150">
            </el-table-column>
            <el-table-column
                    label="添加人"
                    align="center"
                    prop="createUser"
                    min-width="100">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center"
                    width="300">
                <template slot-scope="scope" class="handle">
                    <a href="javascript:void(0);" @click="modifyProduct(scope.row.id)">修改</a>
                    <a href="javascript:void(0);" @click="checkProductDetail(scope.row.id)">查看</a>
                    <a href="javascript:void(0);" @click="takeOff(scope.row.id)" v-if="scope.row.status">下架</a>
                    <a href="javascript:void(0);" @click="takeOn(scope.row.id)" v-else>上架</a>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange1"
          :current-page="currentPage"
          :page-sizes="[20]"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="totalSize">
        </el-pagination>
    </div>
</template>
<script>
	import { mapGetters } from 'vuex'
	import { getScenicList, ModifyStatus } from '@/api/scenicList'
	export default {
		computed: {
			...mapGetters([
				'name',
				'roles'
			])
		},
		data() {
			return {
        scenicForm: {
          scenicName: null
        },
        currentPage: 1,
        totalSize: null,
				tableData: [],
				loadingScenicList: false,
				takeOffDialogVisible: false
			}
		},
		created() {
			this.getScenicList()
		},
		methods: {
		  search() {
        this.currentPage = 1
        this.getScenicList()
      },
      handleCurrentChange1(val) {
        this.currentPage = val
        this.getScenicList(val)
      },
			getScenicList() {
				this.loadingScenicList = true
        let params = {
          pageNumber: this.currentPage,
          pageSize: 20,
          scenicName: this.scenicForm.scenicName || null,
          status: this.scenicForm.status || null
        }
				getScenicList(params).then(res => {
					let data = res.data
					this.loadingScenicList = false
					if (data.errorCode === 'E_000') {
						data.body.list.forEach(item => {
							if (item.status) {
								item.statusValue = '正常'
							} else {
								item.statusValue = '下架'
							}
						})
						this.tableData = data.body.list
            this.totalSize = data.body.total
					}
				}).catch(() => {
					this.loadingScenicList = false
				})
			},
			modifyProduct(id) {
				this.$router.push({ path: '/scenicManage/scenicEidt', query: { status: 'edit', id: id }})
			},
			addProduct() {
				this.$router.push({ path: '/scenicManage/scenicAdd' })
			},
			takeOff(id) {
				let params = {
					id: id,
					status: 0
				}
				this.$confirm('下架该景区后，所有一卡通会员将无法通过闸机或POS机验证入园，确定要下架?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
          ModifyStatus(params).then(res => {
						let data = res.data
						if (data.errorCode === 'E_000') {
							this.$message({
								type: 'success',
								message: data.message
							})
							this.getScenicList()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消下架'
					})
				})
			},
			takeOn(id) {
				let params = {
					id: id,
					status: 1
				}
        ModifyStatus(params).then(res => {
					let data = res.data
					if (data.errorCode === 'E_000') {
						this.$message({
							type: 'success',
							message: data.message
						})
						this.getScenicList()
					}
				})
			},
			checkProductDetail(id) {
				this.$router.push({ path: '/scenicManage/scenicDetail', query: { status: 'check', id: id }})
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss">
    #scenic-list{

    }
</style>
